<template>
  <div class="app-container">
    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="订单信息" size="65%" :withHeader="false"
      :visible.sync="detailsDialog" @close="addressClose" :show-close="true">
      <div class="drawerTitle">
        <span>订单信息</span>
        <div class="close" @click="addressClose">
          <i class="el-icon-close" style="font-size: 24px;"></i>
        </div>
      </div>
      <div style="position: relative;padding: 10px 30px;" v-loading="detailsLoading">
        <div class="order_box">
          <div>订单编号：<span>{{detailsObj.order_no}}</span></div>
          <div>订单类型：<span v-if="detailsObj.type == 1">普通订单</span>
              <span v-if="detailsObj.type == 2">活动订单</span></div>
          <div style="flex: 1;"></div>
          <div style="margin-right: 5px;">支付状态：
          <span style="color: #bd3124;" v-if="detailsObj.status == 1">待支付</span>
          <span style="color: #bd3124;" v-else>已支付</span>
          </div>
        </div>
        <div style="margin-top: 10px;">
          <el-tabs v-model="activeNames" @tab-click="infotabshandleClick">
            <el-tab-pane label="订单信息" name="order_information"></el-tab-pane>
            <el-tab-pane label="商品列表" name="order_goodslist"></el-tab-pane>
            <el-tab-pane label="支付信息" name="order_pay"></el-tab-pane>
            <el-tab-pane label="订单备注" name="order_remarks"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="informationTitleView" v-if="activeNames == 'order_information'">
          <div class="leftBox">
            <div class="leftborder"></div>
            <div class="text">用户信息</div>
          </div>
          <div class="right">
          </div>
        </div>
        <div class="useribfx" v-if="activeNames == 'order_information'">
          <div style="
              width: 64px;
              height: 64px;
              border-radius: 32px;
              overflow: hidden;
            ">
            <el-image v-if="detailsuser.avatar ? detailsuser.avatar : '-'"
              :src="detailsuser.avatar ? detailsuser.avatar : '-'" :preview-src-list="[
                detailsuser.avatar ? detailsuser.avatar : '-',
              ]" />
          </div>
          <div class="user_ibx">
            <div>
              <div class="user_infox">用户uuid：{{detailsuser.uuid}}</div>
              <div class="user_infox">用户昵称：{{detailsuser.nickname}}</div>
            </div>
            <div style="margin-left: 50px;">
              <div class="user_infox">用户账户：{{detailsuser.mobile}}</div>
              <div class="user_infox">用户标签：<span v-for="(item,index) in detailsuser.user_tag">{{item.tag_name}}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 用户 -->
        <div v-if="activeNames == 'order_information'">
          <div class="informationTitleView">
            <div class="leftBox">
              <div class="leftborder"></div>
              <div class="text">订单信息</div>
            </div>
            <div class="right">

            </div>
          </div>
          <el-descriptions :column="2" style="margin-top: 10px">
            <el-descriptions-item label-class-name="my-label" content-class-name="description">
              <template slot="label"> 订单流水号 </template>
              {{ detailsObj.order_no ? detailsObj.order_no : "-" }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" content-class-name="description">
              <template slot="label"> 订单类型 </template>
              <span style="color: #1890ff" v-if="detailsObj.type == 1">普通订单</span>
              <span style="color: #1890ff;" v-if="detailsObj.type == 2">活动订单</span>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" content-class-name="description">
              <template slot="label"> 商品数量 </template>
              {{ detailsObj.goods_nums ? detailsObj.goods_nums : "-" }}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" content-class-name="description">
              <template slot="label"> 订单状态 </template>
              <span v-if="detailsObj.status == 1">待支付</span>
              <span v-if="detailsObj.status == 2">待发货</span>
              <span v-if="detailsObj.status == 3">待收货</span>
              <span v-if="detailsObj.status == 4">售后</span>
              <span v-if="detailsObj.status == 5">已收货</span>
              <span v-if="detailsObj.status == 6">已完成</span>
              <span v-if="detailsObj.status == 9">已取消</span>
            </el-descriptions-item>

            <el-descriptions-item label-class-name="my-label" content-class-name="description">
              <template slot="label"> 余额总价 </template>
              {{ detailsObj.price_total}}
            </el-descriptions-item>

            <el-descriptions-item label-class-name="my-label" content-class-name="description">
              <template slot="label"> 积分总价(含手续费) </template>
              {{detailsObj.points_total }}
            </el-descriptions-item>

            <el-descriptions-item label-class-name="my-label" content-class-name="description">
              <template slot="label"> 提货券总价(含手续费) </template>
              {{ detailsObj.coupon_total}}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" content-class-name="description">
              <template slot="label"> 总运费 </template>
              {{ detailsObj.freight_total}}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" content-class-name="description">
              <template slot="label"> 总折扣 </template>
              {{ detailsObj.discount_total}}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" content-class-name="description">
              <template slot="label"> 实际余额支付 </template>
              {{ detailsObj.pay_total}}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" content-class-name="description">
              <template slot="label"> 下单时间 </template>
              {{ detailsObj.created_at}}
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" content-class-name="description">
              <template slot="label"> 订单ID </template>
              {{ detailsObj.id}}
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <!-- 商品列表 -->
        <div v-if="activeNames == 'order_goodslist'">
          <el-row :gutter="20">
            <el-col :span="24" v-loading="goodsListLoading">
              <el-table highlight-current-row :data="goodsList" :header-cell-style="{
                  'background-color': '#f3f8fe',
                  color: '#606266',
                  height: '50px',
                }" style="width: 100%">
                <el-table-column align="center" prop="trade_no" label="子订单号" width="150">
                  <template slot-scope="scope">
                    <el-tooltip placement="top-start" :content="scope.row.trade_no + ''">
                      <div class="one_line_hidden">
                        {{ scope.row.trade_no ? scope.row.trade_no : "-" }}
                      </div>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="goods_name" label="商品名字" width="200">
                  <template slot-scope="scope">
                    <el-tooltip placement="top-start" :content="scope.row.goods_name + ''">
                      <div class="one_line_hidden">
                        {{ scope.row.goods_name ? scope.row.goods_name : "-" }}
                      </div>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="buy_number" label="购买数量">
                </el-table-column>
                <el-table-column align="center" prop="pay_total" label="现金">
                </el-table-column>
                <el-table-column align="center" prop="points_total" label="积分">
                </el-table-column>
                <el-table-column align="center" prop="coupon_total" label="提货券">
                </el-table-column>
                <el-table-column align="center" prop="discount_total" label="总抵扣">
                </el-table-column>


              </el-table>
            </el-col>
          </el-row>
        </div>
        <!-- 支付 -->
        <div v-if="activeNames == 'order_pay'">
          <el-row :gutter="20">
            <el-col :span="24" v-loading="payListLoading">
              <el-table highlight-current-row :data="payList" :header-cell-style="{
                  'background-color': '#f3f8fe',
                  color: '#606266',
                  height: '50px',
                }" style="width: 100%">
                <el-table-column align="center" prop="pay_order_no" label="支付流水号" width="150">
                  <template slot-scope="scope">
                    <el-tooltip placement="top-start" :content="scope.row.pay_order_no + ''">
                      <div class="one_line_hidden">
                        {{ scope.row.pay_order_no ? scope.row.pay_order_no : "-" }}
                      </div>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="pay_service" label="服务商">
                  <template slot-scope="scope">
                    <span v-if="scope.row.pay_client == 1">APP</span>
                    <span v-if="scope.row.pay_client == 2">WAP</span>
                    <span v-if="scope.row.pay_client == 3">PC</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="pay_client" label="支付渠道">
                  <template slot-scope="scope">
                    <span v-if="scope.row.pay_service == 1">余额</span>
                    <span v-if="scope.row.pay_service == 2">支付宝</span>
                    <span v-if="scope.row.pay_service == 3">微信</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="pay_service" label="支付类型">
                  <template slot-scope="scope">

                  </template>
                </el-table-column>
                <el-table-column align="center" prop="created_at" label="发起时间">
                  <template slot-scope="scope">
                    <el-tooltip placement="top-start" :content="scope.row.created_at + ''">
                      <div class="one_line_hidden">
                        {{ scope.row.pay_order_no ? scope.row.created_at : "-" }}
                      </div>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="pay_status" label="支付状态">
                  <template slot-scope="scope">
                    <span v-if="scope.row.pay_status == 0">待支付</span>
                    <span v-if="scope.row.pay_status == 1">已支付</span>
                    <span v-if="scope.row.pay_status == 2">已取消</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="pay_time" label="支付时间">
                  <template slot-scope="scope">
                    <el-tooltip placement="top-start" :content="scope.row.created_at + ''">
                      <div class="one_line_hidden">
                        {{ scope.row.pay_order_no ? scope.row.created_at : "-" }}
                      </div>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="pay_total" label="余额">
                </el-table-column>
                <el-table-column align="center" prop="points_total" label="积分">
                </el-table-column>
                <el-table-column align="center" prop="coupon_total" label="提货券">
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </div>
        <!-- 订单信息remarkList -->
        <div v-if="activeNames == 'order_remarks'">
          <el-row :gutter="20">
            <el-col :span="20" style="margin-bottom: 20px;">

            </el-col>
            <el-col :span="24" v-loading="remarkLoading">
              <el-table highlight-current-row :data="remarkList" :header-cell-style="{
                'background-color': '#f3f8fe',
                color: '#606266',
                height: '50px',
              }" style="width: 100%">
                <el-table-column align="center" prop="create_user" label="创建人" width="150">
                </el-table-column>
                <el-table-column align="center" prop="created_at" label="备注时间" width="180">
                  <template slot-scope="scope">
                    <el-tooltip placement="top-start" :content="scope.row.created_at + ''">
                      <div class="one_line_hidden">
                        {{ scope.row.created_at ? scope.row.created_at : "-" }}
                      </div>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="remark" label="备注内容">
                  <template slot-scope="scope">
                    <el-tooltip placement="top-start" :content="scope.row.remark + ''">
                      <div class="one_line_hidden">
                        {{ scope.row.remark ? scope.row.remark : "-" }}
                      </div>
                    </el-tooltip>
                  </template>
                </el-table-column>

              </el-table>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import {
    getInfoByOrder,
    getRemarkList,
    getGoodsByOrder,
    getPayList
  } from "@/api/order/index";
  export default {
    components: {},
    data() {
      return {
        activeNames: 'order_information',
        detailsuser:{},
        detailsObj: {}, //订单信息
        detailsDialog:false,
        loading: false,
        goodsid:'',
        goodsListLoading:false,
        payListLoading:false,
        remarkLoading:false,
        detailsLoading:false
      }
    },
    watch: {

    },
    methods: {
      //切换tab
      infotabshandleClick(tab, event) {
        if (this.activeNames == 'order_remarks') {
          this.editNotesWay()
        }
        if (this.activeNames == 'order_goodslist') {
          this.getgoodsByOrder()
        }
        if (this.activeNames == 'order_pay') {
          this.getgoodspay()
        }

      },
      editNotesWay(row) {
        this.remarkLoading = true;
        getRemarkList({
          detail_id: this.goodsid
        }).then((res) => {
          this.remarkLoading = false;
          if (res.code !== 200 || res.status !== 1) {
            this.remarkDialog = false;
            return this.$messages.error(res.msg);
          }
          this.remarkList = res.data;
        });
      },
      getgoodsByOrder() {
        this.goodsListLoading = true
        getGoodsByOrder({id:this.goodsid})
          .then((res) => {
            this.goodsListLoading = false;
            this.goodsList = res.data;
            // this.total = res.data.total;
          })
          .catch((err) => {
            this.goodsListLoading = false;
            this.$messages.error(err.msg);
          });
      },
      //获取支付列表
      getgoodspay() {
        this.payListLoading = true
        getPayList({id:this.goodsid})
          .then((res) => {
            this.payListLoading = false;
            this.payList = res.data;

          })
          .catch((err) => {
            this.payListLoading = false;
            this.$messages.error(err.msg);
          });
      },
      // 关闭弹框
      addressClose() {
        this.detailsDialog = false
      },
      open(id) {
        this.goodsid = id
        this.detailsDialog = true
        this.getListWay()
      },
      // 获取商品列表
      getListWay() {
        this.detailsLoading = true
       getInfoByOrder({
         id: this.goodsid
       }).then((res) => {
         if (res.code !== 200 && res.status !== 1) {
           this.$messages.error(res.msg);
           return;
         }
         if(res.data.order){
           this.detailsObj = res.data.order
           this.detailsuser = res.data.user
           this.detailsLoading = false
         }else{
           this.$messages.error('数据不存在');
           setTimeout(()=>{
             this.detailsLoading = false
             this.detailsDialog = false
           },1000)
         }

       }).catch((err)=>{
         this.detailsLoading = false
       })
      },
    }
  }
</script>


<style lang="scss" scoped>
  .my-label {
    width: 30%;
    text-align: center !important;
    font-size: 14px;
    font-weight: 550;
  }

  .description {
    font-size: 14px;
    font-weight: 550;
  }
.infoViews {
    position: relative;
    padding: 20px;
    border: 1px solid #efefef;
    border-radius: 5px;
    .status {
      position: absolute;
      top: 20px;
      right: 20px;
      span {
        font-size: 14px;
        color: #4e5969;
      }
      i {
        font-style: normal;
        font-size: 14px;
        color: #85ce61;
        margin-left: 10px;
      }
    }
    .descriptionsLabel {
      width: 65px;
      font-size: 14px;
      color: #383838;
    }
    .descriptionsContent {
      font-size: 14px;
      color: #383838;
    }
  }
  .order_box {
    width: 100%;
    margin: 0 auto;
    background-color: #efefef;
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 60px;
    font-size: 14px;
    border-radius: 6px;
    color: #636569;

    div {
      margin-right: 36px;
    }

    span {
      font-weight: 550;
    }
  }
  .useribfx {
    display: flex;
    align-items: center;

    .user_ibx {
      width: 70%;
      margin-left: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .user_infox {
        color: #636569;
        font-size: 14px;
        line-height: 40px;
        font-weight: 550;
      }
    }
  }
  .informationTitleView .right span{
    color: #fff;
  }
</style>
